<template>
    <div class="paySuborder" v-if="isload">
        <form
            action="/index.php/Mobile/Payment/getCode.html"
            onkeydown="if(event.keyCode==13)return false;"
            method="post"
            name="cart4_form"
            id="cart4_form"
        >
            <div class="ddmoney">
                <div>
                    <span class="fl">订单号</span>
                    <span class="fr">{{ orderInfo.order_sn }}</span>
                </div>
            </div>
            <div class="ddmoney" style="border-bottom: none">
                <div>
                    <span class="fl">订单金额</span>
                    <span class="fr"
                        >¥{{ orderInfo.order_amount | money }}</span
                    >
                </div>
            </div>
            <!--其他支付方式-s-->
            <div class="paylist">
                <div class="myorder debit otherpay p">
                    <div class="content30">
                        <a href="javascript:void(0);">
                            <div class="order">
                                <div class="fl">
                                    <span>支付方式</span>
                                </div>
                                <div class="fr">
                                    <!--<i class="Mright xjt"></i>-->
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="pay-list-4 p">
                <div class="maleri30">
                    <ul>
                        <!-- 基础功能余额支付，不需安装插件 -->
                        <li @click="checkType = '余额'">
                            <label>
                                <div class="radio fl">
                                    <span
                                        class="che"
                                        :class="{
                                            check_t: checkType == '余额',
                                        }"
                                    >
                                        <i>
                                            <input
                                                type="radio"
                                                value="pay_code=balance"
                                                class="c_checkbox_t"
                                                name="pay_radio"
                                                style="display: none"
                                            />
                                        </i>
                                    </span>
                                </div>
                                <div class="pay-list-img fl">
                                    <img src="/public/images/balace_pay.png" />
                                </div>
                                <div class="pay-list-font fl">
                                    余额支付<span class="balance"
                                        >&nbsp;( 余额 : ¥
                                        {{ orderInfo.user_money | money }}
                                        )</span
                                    >
                                </div>
                            </label>
                        </li>

                        <li @click="checkType = 'alipay'">
                            <label>
                                <div class="radio fl">
                                    <span
                                        class="che 1"
                                        :class="{
                                            check_t: checkType == 'alipay',
                                        }"
                                    >
                                        <i>
                                            <input
                                                type="radio"
                                                value="pay_code=alipay"
                                                class="c_checkbox_t"
                                                name="pay_radio"
                                                style="display: none"
                                            />
                                        </i>
                                    </span>
                                </div>
                                <div class="pay-list-img fl">
                                    <img
                                        src="../../assets/images/withdraw-zhifubao.png"
                                    />
                                </div>
                                <div class="pay-list-font fl">支付宝</div>
                            </label>
                        </li>

                        <li @click="checkType = 'qmf'">
                            <label>
                                <div class="radio fl">
                                    <span
                                        class="che 2"
                                        :class="{
                                            check_t: checkType == 'qmf',
                                        }"
                                    >
                                        <i>
                                            <input
                                                type="radio"
                                                value="pay_code=qmf"
                                                class="c_checkbox_t"
                                                name="pay_radio"
                                                style="display: none"
                                            />
                                        </i>
                                    </span>
                                </div>
                                <div class="pay-list-img fl">
                                    <img
                                        src="../../assets/images/withdraw-pay.png"
                                    />
                                </div>
                                <div class="pay-list-font fl">银联在线</div>
                            </label>
                        </li>

                        <!-- <li @click="checkType = '银联云闪付'">
                            <label>
                                <div class="radio fl">
                                    <span
                                        class="che 3"
                                        :class="{
                                            check_t: checkType == '银联云闪付',
                                        }"
                                    >
                                        <i>
                                            <input
                                                type="radio"
                                                value="pay_code=uac"
                                                class="c_checkbox_t"
                                                name="pay_radio"
                                                style="display: none"
                                            />
                                        </i>
                                    </span>
                                </div>
                                <div class="pay-list-img fl">
                                    <img src="../../assets/images/upay.png" />
                                </div>
                                <div class="pay-list-font fl">银联云闪付</div>
                            </label>
                        </li> -->
                    </ul>
                </div>
            </div>
            <!--其他支付方式-s-->

            <div class="paiton">
                <div class="maleri30">
                    <input
                        type="hidden"
                        name="order_id"
                        value="1502"
                        id="order_id"
                    />
                    <a class="soon" @click="goPay()"><span>立即支付</span></a>
                </div>
            </div>
        </form>

        <!-- 支付密码 -->
        <van-dialog
            v-show="dialoshow"
            v-model="dialoshow"
            title="支付密码"
            show-cancel-button
            :beforeClose="chargeBtn"
        >
            <!--输入框-->
            <van-field
                v-model="payPassword"
                rows="1"
                autosize
                label=""
                value=""
                type="password"
                placeholder="请输入 6 位数字支付密码"
                autocomplete="new-password"
                ref="paworder"
            />
        </van-dialog>

        <div class="zhanwei"></div>
    </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast, Dialog } from 'vant';
export default {
    name: '',
    data() {
        return {
            checkType: '余额',
            isload: false,
            payPassword: '',

            dialoshow: false,
            message: '',

            orderInfo: {},
        };
    },
    computed: {},
    mounted() {
        // 获取加密后的订单信息
        let neworderInfo = JSON.parse(sessionStorage.orderInfo);
        this.orderInfo = {
            order_id: this.decrypt(neworderInfo.order_id),
            order_sn: this.decrypt(neworderInfo.order_sn),
            order_amount: this.decrypt(neworderInfo.order_amount),
            user_money: this.decrypt(neworderInfo.user_money),
        };
        this.isload = true;
    },
    watch: {
        dialoshow(val) {
            if (val) {
                this.$nextTick(() => {
                    this.$refs.paworder.focus();
                });
            }
        },
    },
    methods: {
        // 支付密码确认
        chargeBtn(action, done) {
            //确认or取消
            if (action === 'cancel') {
                //取消按钮
                done();
            } else if (action === 'confirm') {
                if (!/^\d{6}$/.test(this.payPassword) && !this.payPassword) {
                    Toast({
                        message: '请输入正确的 6 位数字支付密码',
                        duration: 2000,
                    });
                    this.dialoshow = false;
                    done();
                    return;
                }
                // 支付密码输入后
                axiosPost(
                    '/api/payment/balancePay',
                    {
                        password: this.payPassword,
                        order_id: this.orderInfo.order_id,
                        pay_code: 'balance',
                    },
                    (res) => {
                        Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                        if (res.status != 1) {
                            return;
                        }
                        setTimeout(() => {
                            this.$router.push('/shop');
                        }, 1000);
                    }
                );
            }
            this.payPassword = '';
            done();
        },
        // 提交支付
        goPay() {
            if (this.checkType == '余额') {
                let userInfo = JSON.parse(localStorage.userinfo);
                if (userInfo.paypwd) {
                    this.dialoshow = true;
                } else {
                    Dialog.confirm({
                        title: '',
                        message: '您还未设置支付密码，前去设置？',
                    })
                        .then(() => {
                            // on confirm
                            this.$router.push('/paypwd');
                        })
                        .catch(() => {
                            // on cancel
                        });
                }
            } else {
                axiosPost(
                    '/api/payment/pay',
                    {
                        order_id: this.orderInfo.order_id,
                        pay_code: this.checkType,
                    },
                    (res) => {
                        // console.log(res);

                        if (res.status != 1) {
                            return Toast({
                                message: res.msg,
                                duration: 2000,
                            });
                        }

                        window.location.href = res.data.pay_url;
                    }
                );
            }
        },
    },
};
</script>

<style lang="less" scope>
.paySuborder {
    .radio .check_t i {
        background-position: -0.9468rem 0.09rem;
        background-size: 1.638rem;
    }
    .content {
        background-color: #fff;
    }
    .ddmoney {
        width: 14.59rem;
        margin: 0 0.73rem;
        border-bottom: 0.02rem solid #e3e5e9;
    }
    .ddmoney span.fl {
        font-size: 0.64rem;
        font-weight: bold;
    }
    .ddmoney .fr {
        font-size: 0.77rem;
        font-family: 'DIN';
    }
    .otherpay .order .fl span {
        font-size: 0.64rem;
        font-weight: bold;
    }
    .otherpay .order {
        height: 1.98rem;
        line-height: 1.98rem;
    }
    .pay-list-4 {
        padding: 0;
    }
    .pay-list-4 ul li {
        padding: 0;
        padding-top: 0.5rem;
        border: none;
    }
    .radio i {
        background-image: url(../../assets/images/check.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-size: 1.838rem;
        background-position: 0;
    }

    .balance {
        font-size: 0.54rem;
        color: #999;
    }
    .password {
        background-color: white;
        bottom: 0px;
        position: fixed;
        height: 9rem;
        width: 100%;
    }
    .password-input {
        position: absolute;
        width: 80%;
        margin: 0 auto;
        left: 0;
        right: 0;
        height: 1.7777rem;
        font-size: 0.68888rem;
        border-bottom: 1px solid #8888;
    }
    .password .text {
        text-align: center;
        font-size: 0.77777rem;
        margin-top: 40px;
    }
    .password .close {
        float: right;
        margin-right: 20px;
        margin-top: 5px;
        font-size: 0.8rem;
    }
}
</style>
